<template>
  <div id="tabsTable">
    <el-card>
      <el-tabs tab-position="top" class="demo-tabs" @tab-click="handleClick" v-model="orderStatus">
        <el-tab-pane name="dsh">
          <template #label>
            <span>
              <a href="#">Tabs-待审核</a>
            </span>
          </template>
          <div class="dai" v-if="daiflagShow">
            <tableHeaderTop shai_xuan="true" comOrderNumber="true" dsh="true" name-of-ship="true"></tableHeaderTop>
          </div>
          <div class="tableCard">
            <Dsh>
              <template #danWei="scope">
                <el-button style="color: #97dab0; font-weight: 900" @click.stop="detailed">
                  {{ scope.row.unit }}
                </el-button>
              </template>
            </Dsh>
          </div>
        </el-tab-pane>
        <el-tab-pane name="jxz">
          <template #label>
            <span>
              <a href="#">Tabs-进行中</a>
            </span>
          </template>
          <div class="dai" v-if="daiflagShow">
            <tableHeaderTop
              shai_xuan="true"
              comOrderNumber="true"
              jxz="true"
              comOrderTime="true"
              nameOfShip="true"
              entryNumber="true"
            ></tableHeaderTop>
          </div>
          <div class="tableCard">
            <Jxz></Jxz>
          </div>
        </el-tab-pane>
        <el-tab-pane name="ygd">
          <template #label>
            <span>
              <a href="#">Tabs-已归档</a>
            </span>
          </template>
          <div class="dai" v-if="daiflagShow">
            <tableHeaderTop shai_xuan="true" comOrderNumber="true" ygd="true"></tableHeaderTop>
          </div>
          <div class="tableCard">
            <Ygd></Ygd>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-card> 未完成:新增-导入-导出-下载模板-搜索条件-回收站-删除-撤销归档-归档-待审核详情 </el-card>
  </div>
</template>

<script lang="ts" setup name="tabsTable">
// tabsTable
import Dsh from './components/Dsh.vue'
import Jxz from './components/Jxz.vue'
import Ygd from './components/Ygd.vue'
// 引入事件总线并切换路由的时候卸载
import bus from '@/libs/bus'

import useStore from '@/stores'
const { useTable } = useStore()

// 默认激活的面板
const orderStatus = ref<string>('dsh')
// 切换面板
const daiflagShow = ref(false)
// 优先触发待审核的标题
daiflagShow.value = true
// 请求表格数据
useTable.getTableDataList('dsh')

interface dshDataHeader {
  lable: string
  property: string
  isShow: boolean
  render?: any
}
// dsh表头
const dshtabsTableDshHeard = ref<dshDataHeader[]>([
  { lable: '订单号', property: 'idCard', isShow: true },
  { lable: '进程状态', property: 'processStatus', isShow: true },
  { lable: '创建日期', property: 'creationDate', isShow: true },
  { lable: '仓号', property: 'warehouseNumber', isShow: true },
  { lable: '单位', property: 'unit', isShow: true },
  { lable: '编号', property: 'number', isShow: true }
])
// jxz表头
const jxztabsTableDshHeard = ref<dshDataHeader[]>([
  { lable: '订单号', property: 'idCard', isShow: true },
  { lable: '进程状态', property: 'processStatus', isShow: true },
  { lable: '仓号', property: 'warehouseNumber', isShow: true },
  { lable: '单位', property: 'unit', isShow: true },
  { lable: '编号', property: 'number', isShow: true }
])
// ygd表头
const ygdtabsTableDshHeard = ref<dshDataHeader[]>([
  { lable: '订单号', property: 'idCard', isShow: true },
  { lable: '单位', property: 'unit', isShow: true },
  { lable: '编号', property: 'number', isShow: true },
  { lable: '创建日期', property: 'creationDate', isShow: true }
])

// 设置表头
const dshColumn = (key: string) => {
  // 获取指定key 本地存储数据的值
  let tableColumns = sessionStorage.getItem(key)
  // 定义表头数据的对应关系
  const map = {
    dsh: dshtabsTableDshHeard.value,
    jxz: jxztabsTableDshHeard.value,
    ygd: ygdtabsTableDshHeard.value
  } as any
  console.log('🌈成功->key', map[key])
  // 如果本地数据没有则进入判断条件
  if (!tableColumns) {
    // 设置本地数据 [._value因为是引入的字段]
    sessionStorage.setItem(key, JSON.stringify(map[key]))
    // 将本地数据设置成字符串赋值给 tableColumns 变量
    tableColumns = JSON.stringify(map[key])
  }
  // 将本地数据 赋值给 dsh jxz ygd 的表头数据
  map[key] = JSON.parse(tableColumns)
  // 将赋值完毕的表头数据存入到pinia里面
  useTable.setTableList(map[key])
}
dshColumn('dsh')

// 切换面板
const handleClick = async (tab: any) => {
  // 激活的面板
  orderStatus.value = tab.props.name
  // 仓库的面板的名称
  useTable.orderStatus = tab.props.name
  useTable.tabsTableDshList(tab.props.name)
  useTable.getTableDataList(tab.props.name)
  // 设置表头
  dshColumn(tab.props.name)
  // 点击切换面板设置tabs状态名的数据,表头数据是pinia里的表头数据
  sessionStorage.setItem(useTable.orderStatus, JSON.stringify(useTable.tableHeader))
}
useTable.tabsTableDshList('dsh')

// 单位详情
const detailed = () => {
  alert('单位详情')
}
</script>

<style lang="scss" scoped>
#tabsTable {
  .tableCard {
    width: 100%;
    margin-top: 20px;
  }
}
</style>
